<!DOCTYPE html>
<html lang="en" class="app">

<head>
	<meta charset="utf-8" />
	<title>微商云应用</title>
	<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="css/animate.css" />
	<link rel="stylesheet" type="text/css" href="css/font.css" />
	<link rel="stylesheet" type="text/css" href="css/src/devices.min.css" />
	<link rel="stylesheet" type="text/css" href="css/app.css" />
	<!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>

<body class="">
	<section class="vbox">
		<section class="hbox stretch">
			<!-- 左侧栏start -->
			<aside class="bg-dark side-nav nav-xs">
                <a href="index.html" class="backhome"><i class="fa fa-arrow-left"></i></a>
                <ul class="nav pages">
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li>
						<a href="#" class="add-btn">
							<i class="plus horizontal"></i>
							<i class="plus vertical"></i>
						</a>
                    </li>
                </ul>
			</aside>
			<!-- 左侧栏end -->
			
			<!-- 主内容start -->
			<section id="content" class="design-content boxscroll">
				<div class="left-side boxscroll">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                      <div class="panel panel-default collapse-box">
                        <div class="panel-heading" role="tab" id="headingOne">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                              <i class="fa fa-caret-right"></i>
                              背景设置
                            </a>
                          </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                          <div class="panel-body">
							   <ul class="thumbnails">
								   <li class="col-xs-3">
										<a href="#" class="thumbnail active">
										  <img class="img-responsive" src="images/bg/bg-1.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-2.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-3.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-4.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-5.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-6.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-7.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-8.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-2.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-5.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-3">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/bg/bg-1.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-12">
										<a href="#" class="plus-box">
										  	<i class="fa fa-plus"></i>
										</a>
								   </li>
							   </ul>
                          </div>
                        </div>
                      </div>
                      <div class="panel panel-default collapse-box">
                        <div class="panel-heading" role="tab" id="headingTwo">
                          <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                              <i class="fa fa-caret-right"></i>
                              组件设置
                            </a>
                          </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                          <div class="panel-body">
                         	  <ul class="nav nav-tabs">
                         	  		<li class="active"><a href="#ass1" data-toggle="tab">通用组件</a></li>
                         	  		<li><a href="#ass2" data-toggle="tab">通用组件</a></li>
                         	  		<li><a href="#ass3" data-toggle="tab">通用组件</a></li>
                         	  </ul>
                         	  <div class="tab-content">
								  <div class="row tab-pane fade in active" id="ass1">
										<div class="col-xs-3"><div class="ass"><i class="fa fa-list-alt"></i><span>导航</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-image"></i><span>图片</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-columns"></i><span>分栏</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-font"></i><span>文字</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-align-left"></i><span>段落</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-list"></i><span>列表</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-header"></i><span>标题</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-table"></i><span>表格</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-link"></i><span>链接</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-area-chart"></i><span>图表</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-search"></i><span>搜索框</span></div></div>
								  </div>
								  <div class="row tab-pane fade" id="ass2">
										<div class="col-xs-3"><div class="ass"><i class="fa fa-align-left"></i><span>段落</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-list"></i><span>列表</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-header"></i><span>标题</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-table"></i><span>表格</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-link"></i><span>链接</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-area-chart"></i><span>图表</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-search"></i><span>搜索框</span></div></div>
								  </div>
								  <div class="row tab-pane fade" id="ass3">
										<div class="col-xs-3"><div class="ass"><i class="fa fa-header"></i><span>标题</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-table"></i><span>表格</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-link"></i><span>链接</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-area-chart"></i><span>图表</span></div></div>
										<div class="col-xs-3"><div class="ass"><i class="fa fa-search"></i><span>搜索框</span></div></div>
								  </div>
                         	  </div>
                          </div>
                        </div>
                      </div>
                      <div class="panel panel-default collapse-box">
                        <div class="panel-heading" role="tab" id="headingThree">
                          <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                              <i class="fa fa-caret-right"></i>
                              主题模板
                            </a>
                          </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                          <div class="panel-body">
							   <ul class="thumbnails">
								   <li class="col-xs-4">
										<a href="#" class="thumbnail active">
										  <img class="img-responsive" src="images/theme/t1.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t2.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t2.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t3.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t4.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t5.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t6.png" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t7.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-4">
										<a href="#" class="thumbnail">
										  <img class="img-responsive" src="images/theme/t8.jpg" alt="...">
										</a>
								   </li>
								   <li class="col-xs-12">
										<a href="#" class="plus-box">
										  	<i class="fa fa-plus"></i>
										</a>
								   </li>
							   </ul>
                          </div>
                        </div>
                      </div>
                    </div>
				</div>
				<div class="center-content boxscroll">
					<div class="device-box">
						<div class="marvel-device iphone6plus black">
							<div class="top-bar"></div>
							<div class="sleep"></div>
							<div class="volume"></div>
							<div class="camera"></div>
							<div class="sensor"></div>
							<div class="speaker"></div>
							<div class="screen">

								<div class="phone-content p-bg-1">
									<div class="p-box obj">
										<h3 class="obj" contenteditable="true">漂亮的夜景</h3>
										<p class="obj">美丽的夜景，宛如仙境,令人向往，这是一个不 错的地方，可以去玩玩哦，在这里 释放压力，享受人间美景。</p>
										<a href="#" class="arrow"><i class="fa fa-angle-down"></i></a>
									</div>
								</div>

							</div>
							<div class="home"></div>
							<div class="bottom-bar"></div>
						</div>
					</div>
					<div class="control-bar">
						<a href="#" class="r-btn btn btn-danger closebtn" data-toggle="tooltip" data-placement="left"  title="关闭">
							<i class="plus horizontal"></i>
							<i class="plus vertical"></i>
						</a>
						<a href="#" class="r-btn btn btn-primary" data-toggle="tooltip" data-placement="left"  title="预览"><i class="fa fa-eye"></i></a>
						<a href="#" class="r-btn btn btn-warning" data-toggle="tooltip" data-placement="left"  title="反馈"><i class="fa fa-comments"></i></a>
						<a href="#" class="r-btn btn complete-btn">完成</a>
					</div>
				</div>
				<div class="right-side">
				    <h4 class="att-header"><i class="fa fa-eyedropper"></i>属性修改</h4>
				    <div class="att-content">
				    	<h5 contenteditable="true">简介面板</h5>
				    	<form action="">
				    		<div class="form-group">
				    			<label for="">背景颜色</label>
								<div class="input-group">
									<input type="text" class="form-control" placeholder="rgba(0,0,0,.5)">
									<span class="input-group-btn">
										<a class="btn btn-default">...</a> 
									</span>
								</div>
				    		</div>
				    		<div class="form-group">
				    			<label for="">字体颜色</label>
								<input type="text" class="form-control" placeholder="rgba(0,0,0,.5)">
				    		</div>
				    		<div class="form-group">
				    			<label for="">字体大小</label>
								<div class="input-group">
									<input type="text" class="form-control" placeholder="中">
									<span class="input-group-btn">
										<a class="btn btn-default">...</a> 
									</span>
								</div>
				    		</div>
				    		<div class="btn-box">
				    			<a href="#" class="btn btn-primary btn-sm">保存</a>
				    			<a href="#" class="btn btn-default btn-sm">重置</a>
				    		</div>

				    	</form>
				    </div>
				</div>
			</section>
			<!-- 主内容End -->
		</section>
	</section>
	
	
	<script src="js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.js"></script>
	<!-- App -->
	<script src="js/app.js"></script>
	<script src="js/scrollbar/jquery.nicescroll.min.js"></script>
	<script src="js/app.plugin.js"></script>

<script>
    $(function(){


        $(".boxscroll").niceScroll({
            cursorborder:"",
            cursorcolor:"rgba(0,0,0,.3)",
    //      boxzoom:true
        });


    })
</script>
</body>

</html>